import React, { Component } from 'react'
import TabBar from '../common/TabBar';
import Tab from './Tab/Tab';
import axios from 'axios';
import MySwiper from './MySwiper/MySwiper';
import AllShop from './AllShop/AllShop';
export default class Home extends Component {
    constructor(){
        super();
        this.state={
            tabList:[],//tab数据
            bannerList:[],//轮播图数据
            allShopList:[],//所有商定数据
        }
    }
    componentDidMount(){
        /* 请求Tab组件的数据 */
        axios.get('/getTab').then(res=>{
            this.setState({
                tabList:res.data.list
            })
        })
        /* 请求轮播图数据 */
        axios.post('/getbanner',{count:5}).then(res=>{
            this.setState({
                bannerList:res.data.list
            })
        })
        /* 请求商店数据 */
        // axios.get('/allshop').then(res=>{
        //     this.setState({
        //         allShopList:res.data.list
        //     })
        // })
    }
    render() {
        return (
            <div className='home'>
                <div className="inp-header">
                    <div className='iconfont icon-sousuo'></div>
                    <input type="text" name="" id="" placeholder='输入商家，商品名称' onClick={()=>{this.props.history.push('/filter')}}/>
                </div>
                {/* 轮播图组件 */}
                <MySwiper list={this.state.bannerList}></MySwiper>
                <h3>猜你喜欢</h3>
                {/* tab组件 */}
                <Tab list={this.state.tabList}></Tab>
                {/* 商店列表组件 */}
                <AllShop></AllShop>
                {/* 底部公共路由 */}
                <TabBar></TabBar>
            </div>
        )
    }
}
